<template>
    <up-popup class="orderPopup" :safeAreaInsetTop="true" :show="show" :round="10" @close="close" @open="openCallback">
      <view class="content">
        <up-gap height="10" bgColor="#ffffff00"></up-gap>
        <scroll-view
          :scroll-y="true"
          class="scroll-Y"
          :refresher-enabled="true"
          :refresher-triggered="refreshing"
          @refresherrefresh="onRefresh"
          @scrolltolower="onReachBottom"
          :lower-threshold="50"
        >
          <uni-card class="view-title" :title="msg.productName" v-for="(msg, index) in messageList" :key="msg.id || index">
            <up-row customStyle="margin-bottom: 10px">
                <up-col span="12">
                    <h1 class="station-no-text">STATION NO. {{ msg.productNo }}</h1>
                </up-col>
            </up-row>
            <up-row customStyle="margin-bottom: 10px">
                <up-col span="12">
                  {{ msg.content }}
                </up-col>
            </up-row>
            <!-- 显示创建时间 -->
            <up-row customStyle="margin-bottom: 5px" v-if="msg.createTime">
                <up-col span="12">
                  <text class="time-text">創建時間：{{ msg.createTime }}</text>
                </up-col>
            </up-row>
          </uni-card>

          <!-- 加载更多状态提示 -->
          <view class="load-more" v-if="messageList.length > 0">
            <view v-if="loading && !refreshing" class="loading-text">
              <up-loading-icon mode="circle"></up-loading-icon>
              <text style="margin-left: 10rpx;">加载中...</text>
            </view>
            <view v-else-if="!hasMore && !loading" class="no-more-text">
              <text>没有更多数据了</text>
            </view>
          </view>

          <!-- 空状态 -->
          <view v-if="messageList.length === 0 && !loading && !refreshing" class="empty-state">
            <up-empty mode="data" text="暂无数据"></up-empty>
          </view>
        </scroll-view>
      </view>
  </up-popup>
</template>

<script setup  lang="ts">
import { ref } from 'vue';
import { getMessageList } from '@/api/system/map'
import { onLoad, onShow, onHide } from '@dcloudio/uni-app'
import type { MessageItem } from '@/types/Global'

// 创建响应式数据
const show = ref(false);
const messageList = ref<MessageItem[]>([]);
const loading = ref(false);
const refreshing = ref(false);
const hasMore = ref(true);
const currentPage = ref(1);
const pageSize = ref(10);

const emit = defineEmits<{
  (e: 'click', data: any): void
}>()

// 定义方法
function open() {
  // 重置状态
  messageList.value = [];
  currentPage.value = 1;
  hasMore.value = true;
  loading.value = false;
  refreshing.value = false;

  // 加载第一页数据
  loadMessageList();
}

function openCallback() {
}

function close() {
  show.value = false;
}

function onClick(data: any) {
  emit('click', data)
}

// 加载消息列表
function loadMessageList(isRefresh = false, isLoadMore = false) {
  if (loading.value) return; // 防止重复请求

  loading.value = true;

  const params = {
    pageNum: isRefresh ? 1 : currentPage.value,
    pageSize: pageSize.value,
    // 添加排序参数：按创建时间降序排列
    orderByColumn: 'createTime',
    isAsc: 'desc'
  };

  getMessageList(params).then((data: any) => {
    const newData = data.rows || [];
    const total = data.total || 0;

    if (isRefresh) {
      // 下拉刷新：替换数据
      messageList.value = newData;
      currentPage.value = 1;
      // 判断是否还有更多数据：当前数据长度 < 总数据量
      hasMore.value = newData.length < total;
      refreshing.value = false;
    } else if (isLoadMore) {
      // 上拉加载更多：追加数据
      messageList.value.push(...newData);
      // 判断是否还有更多数据：当前总数据长度 < 总数据量
      hasMore.value = messageList.value.length < total;
    } else {
      // 初始加载
      messageList.value = newData;
      // 判断是否还有更多数据：当前数据长度 < 总数据量
      hasMore.value = newData.length < total;
    }

    // 显示弹窗（仅初始加载时）
    if (!isRefresh && !isLoadMore) {
      show.value = true;
    }

    loading.value = false;
  }).catch(error => {
    console.error("获取数据失败:", error);
    loading.value = false;
    refreshing.value = false;

    uni.showToast({
      title: '加载失败',
      icon: 'none'
    });
  });
}

// 下拉刷新
function onRefresh() {
  if (loading.value) return;

  refreshing.value = true;
  currentPage.value = 1;
  loadMessageList(true, false);
}

// 上拉加载更多
function onReachBottom() {
  if (loading.value || !hasMore.value) return;

  currentPage.value++;
  loadMessageList(false, true);
}

onShow(() => {
})

defineExpose({
  open,
  close
});
</script>

<style scoped>
.orderPopup .content {
    padding: 20rpx;
    background-color: #fff;
    border-radius: 10rpx;
    height: 80vh;
    overflow-y: auto;
}

/* 加载更多样式 */
.load-more {
    padding: 30rpx 0;
    text-align: center;
}

.loading-text {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 28rpx;
}

.no-more-text {
    color: #999;
    font-size: 26rpx;
}

/* 空状态样式 */
.empty-state {
    padding: 100rpx 0;
    text-align: center;
}

/* 时间样式 */
.time-text {
    color: #999;
    font-size: 24rpx;
}
/* 确保容器不限制过窄，允许内容展开 */
.station-no-col {
  white-space: nowrap; /* 容器内文本不换行 */
  overflow: hidden; /* 超出部分隐藏（可选，避免溢出破坏布局） */
  text-overflow: ellipsis; /* 超出部分显示省略号（可选） */
}

/* 或直接给文本标签设置 */
.station-no-text {
  white-space: nowrap; /* 强制文本不换行 */
  margin: 0; /* 移除默认margin，避免挤压 */
  font-size: 28rpx; /* 可根据需要调整字体大小，防止因字体过大导致换行 */
}
</style>

